<template>
  <PageWrapper contentFullHeight fixedHeight dense>
    <AdVxeTable @register="registerTable">
      <template #actionCol="{ row }">
        <TableAction
          outside
          :actions="[
            {
              icon: 'clarity:details-line',
              tooltip: t('common.detailText'),
              onClick: handleReadDetail.bind(null, row),
            },
          ]"
        />
      </template>
    </AdVxeTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { useI18n } from '@/hooks/web/useI18n';
  import { PageWrapper } from '@/components/Page';
  import { AdVxeTable, useAdVxeTable, TableAction } from '@/components/AdVxeTable';
  import { FormModeEnum } from '@/enums/formEnum';
  import { readLoginLogs } from '@/api/identity/admin/loginlog';

  import { columns } from './loginlog.data';

  defineOptions({ name: 'LoginLogPage' });

  const { t } = useI18n();
  const [registerTable, { openDetailForm }] = useAdVxeTable({
    id: 'system-login-log-page-table',
    // 表标题呈现器
    title: t('routes.system.loginlog.loginlogList'),
    // 表格数据接口请求对象
    api: readLoginLogs,
    // 详情表单
    detailForm: {
      // 表单标识
      formIndex: 'loginlog_detail',
      // 主键字段
      keyField: 'Id',
      // 详情表单抬头
      title: t('routes.system.loginlog.title'),
    },
    // 表单列信息 BasicColumn[]
    columns,
    // 使用搜索表单
    searchForm: true,
    // 是否带有边框 boolean | default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
    // 表格右侧操作列配置 BasicColumn
    actionColumn: {
      width: 50,
      title: t('common.actionText'),
      fixed: 'right',
      slots: { default: 'actionCol' },
    },
  });

  /** 查看详情 */
  async function handleReadDetail(record: any) {
    openDetailForm(FormModeEnum.ReadOnly, record);
  }
</script>
